<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 添加 -->
    <form action="http://www.baidu.com" id="add">
        姓名: <input type="text" id="addUserName" placeholder="请输入姓名"><br>
        性别: <input type="text" id="addGender" placeholder="请输入性别"><br>
        <input type="submit" value="添加">
    </form><br><br>

    <table border="1">
        <thead>
            <tr bgcolor="gray" align="center">
                <td>编号</td>
                <td>姓名</td>
                <td>性别</td>
                <td>操作</td>
            </tr>
        </thead>
        <tbody>
            <!-- <tr>
                <td>1</td>
                <td>文渊</td>
                <td>男</td>
                <td>
                    <button>编辑</button>
                    <button>删除</button>
                </td>
            </tr> -->
        </tbody>
    </table>
    <br><br>
    <!-- 修改 -->
    <form action="##">
        <input type="hidden">
        姓名: <input type="text" id="editUserName" placeholder="请输入姓名"><br>
        性别: <input type="text" id="editGender" placeholder="请输入性别"><br>
        <input type="submit" value="修改">
    </form>
    <script>
        /* 1. 准备数据 对象数组*/
        var userList = [
            { id: 1, username: "张三", gender: "男" },
            { id: 2, username: "李四", gender: "男" },
            { id: 3, username: "王五", gender: "女" },
            { id: 4, username: "赵六", gender: "男" },
            { id: 5, username: "田七", gender: "女" },
        ]
        /*
            查询:   
                将用户列表当中的数据渲染出来
        */
        var tbody = document.querySelector("tbody")
        render();
        /* 渲染用户列表 */
        function render() {
            var str = "";
            userList.forEach(function (item) {
                str += `
                <tr>
                    <td>${item.id}</td>
                    <td>${item.username}</td>
                    <td>${item.gender}</td>
                    <td>
                        <button>编辑</button>
                        <button>删除</button>
                    </td>
                </tr>
            `
            })
            tbody.innerHTML = str;
        }

        /* 
            增:
                注意: ID 是唯一的   
                1. 收集表单当中数据
                2. 将收集的数据保存到数组里面
                3. 将数组重新一遍
        */
        add.onsubmit = function (e) {
            //阻止表单提交
            e.preventDefault();
            /*
                1. 收集 => value
                2. 判断非空
                3. 收集数据为一个对象
            */
            //收集表单
            var username = addUserName.value
            var gender = addGender.value
            //非空判断
            if (!(username.trim().length > 0 && gender.trim().length > 0)) return alert("请输入完整的数据")
            //收集数据为一个对象
            var obj = {
                id:+new Date(),
                username:username,
                gender:gender
            }

            //获取数据,使用push方法将对象扔到数组的最后面去
            userList.push(obj);
            //重新渲染
            render();

            /* 重新清空文本框 */
            addUserName.value = ""
            addGender.value = ""
        }
    </script>
</body>

</html>